<script lang="ts" setup>
import { ref } from 'vue'
import { ResultStatus } from './resultShow.type'

defineOptions({
  name: 'result-show'
})
const props = defineProps({
  isDialogVisible: {
    type: Boolean,
    default: false
  },
  runningResults: {
    type: String,
    default: ''
  },
  runngingStatus: {
    type: String,
    default: ResultStatus.noRunning
  }
})
const isDialogVisible = ref(props.isDialogVisible)
</script>

<template>
  <el-dialog v-model="isDialogVisible" width="50%" draggable>
    <el-result
      icon="success"
      title="你真棒!"
      style="position: relative"
      v-if="props.runngingStatus === ResultStatus.success"
    >
      <template #extra>
        <div class="extra-result">
          <el-text type="info">运行结果：</el-text>
          <el-text type="success">{{ props.runningResults }}</el-text>
        </div>
        <div class="cartoon-figure">
          <img src="@/assets/gifs/smile.gif" alt="" />
        </div>
        <div class="cannoon-animation-container">
          <canoon></canoon>
          <canoon style="transform: scaleX(-1)"></canoon>
        </div>
      </template>
    </el-result>
    <el-result
      icon="error"
      title="继续努力!"
      style="position: relative"
      v-else-if="props.runngingStatus === ResultStatus.error"
    >
      <template #extra>
        <div class="extra-result">
          <el-text type="info">运行结果：</el-text>
          <el-text type="danger">{{ props.runningResults }}</el-text>
        </div>
        <div class="cartoon-figure">
          <img src="@/assets/gifs/cry.gif" alt="" />
        </div>
      </template>
    </el-result>
    <section class="isRunnging" v-else-if="props.runngingStatus === ResultStatus.isRunning">
      <el-text type="info">正在运行...</el-text>
      <el-progress :percentage="50" status="success" :indeterminate="true" />
    </section>
    <section v-else-if="props.runngingStatus === ResultStatus.noRunning" class="no-code-status-container">
      <div class="cartoon-figure">
        <bubble-container
          :isFading="false"
          message="还没有编写代码哦!返回编辑器编写代码吧！"
          :leftFixedPx="-200"
        ></bubble-container>
        <img src="@/assets/gifs/stand.gif" alt="" />
      </div>
    </section>
  </el-dialog>
</template>

<style lang="scss" scoped>
:deep(.el-dialog) {
  border-radius: 10px;
}
.cannoon-animation-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 500px;
  position: absolute;
  bottom: -300px;
  left: 0;
}
.extra-result {
  display: flex;
  justify-content: center;
}
.cartoon-figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  img {
    width: 400px;
    height: 400px;
  }
}
.no-code-status-container {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content:flex-end;
}
:deep(.el-text) {
  font-size: 30px;
}
</style>
